<template>
    <div style="display: flex;flex:1;">
        <div class="chart-box">
            <div class="ref-title">引用排行榜</div>
            <div id="refChart"></div>
        </div>
        <div class="chart-box">
            <div class="submit-title">投稿排行榜</div>
            <div id="submitChart"></div>
        </div>
    </div>
</template>

<script>
    import apis from "../../public/api";

    export default {
        name: "rankBox",
        data() {
            this.refChart = null;
            this.submitChart = null;
            this.baseOptions = {
                grid:{
                    containLabel:true
                },
                xAxis: {
                    max: 'dataMax',
                    show:false,
                },
                yAxis: {
                    type: 'category',
                    inverse: true,
                    animationDuration: 300,
                    animationDurationUpdate: 300,
                    max: 9, // only the largest 10 bars will be displayed
                    axisLabel: {
                        color:"#0F88A1",
                    },
                    axisLine: {
                        show:false
                    },
                    axisTick:{
                        show:false
                    }
                },
                color:["#2F9BFF"],
                series: [
                    {
                        realtimeSort: true,
                        name: 'X',
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'right',
                            valueAnimation: true
                        },
                        barWidth: 21
                    }
                ]
            };
            return {
                rankList: []
            }
        },
        mounted() {
            this.refChart = this.$echarts.init(document.getElementById("refChart"));
            this.submitChart = this.$echarts.init(document.getElementById("submitChart"));
            this.getRankInfo();
        },
        methods: {
            async getRankInfo() {
                let res = await this.axios.get(apis.rankInfo);
                res = res.data;
                if (res.success && res.result) {
                    let refNames = [],refValues = [],submitNames = [],submitValues = [];
                    res.result.refRank && res.result.refRank.forEach(item=>{
                        refNames.push(item.content_title);
                        refValues.push(item.num);
                    });
                    res.result.submitRank && res.result.submitRank.forEach(item=>{
                        submitNames.push(item.name);
                        submitValues.push(item.num);
                    });
                    const refOptions = JSON.parse(JSON.stringify(this.baseOptions));
                    refOptions.yAxis.data = refNames;
                    refOptions.series[0].data = refValues;
                    this.refChart.setOption(refOptions);

                    const submitOptions = JSON.parse(JSON.stringify(this.baseOptions));
                    submitOptions.yAxis.data = submitNames;
                    submitOptions.series[0].data = submitValues;
                    this.submitChart.setOption(submitOptions);
                }
            }
        }
    }
</script>

<style scoped>
    #refChart, #submitChart{
        width: 100%;
        height: 100%;
    }
    .chart-box{
        border: 2px solid #0F88A1;
        padding: 10px 15px;
        margin: 10px;
        flex: 1;
        border-radius: 8px;
    }
    .ref-title,.submit-title{
        font-size: 14px;
        text-align: center;
    }

</style>
